<!--
 * @FilePath: index.vue
 * @Author: 杜芬
 * @Date: 2023-05-24 11:20:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-05-29 16:50:48
 * Copyright: 2023 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div class="my-components">
    <h2>下拉框里显示input框</h2>
    <div style="width: 120px">
      <el-select v-if="inputVisible" v-model="value" placeholder="请选择" @change="changeSelect" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-input ref="inputRefs" v-else v-model="value2" @click="showInput" clearable></el-input>
    </div>

    <!-- 折叠面板 -->
    <div class="Rbox-main2Box">
      <el-collapse v-model="activeNames" style="border-top: none" class="Collapse" :accordion="false">
        <el-collapse-item v-for="(item, index) in main1Rtxt" :title="item.label" :name="index" :key="item.value">
          <div>
            {{ item.value }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 折叠面板 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: [0, 1],
      property: 'value',
      options: [
        {
          value: '1',
          label: '黄金糕',
        },
        {
          value: '2',
          label: '双皮奶',
        },
        {
          value: '3',
          label: '其他（需手工填写）',
        },
      ],
      main1Rtxt: [
        {
          value: '1',
          label: '黄金糕',
        },
        {
          value: '2',
          label: '双皮奶',
        },
        {
          value: '3',
          label: '其他（需手工填写）',
        },
      ],
      value: '',
      value2: '',
      inputVisible: true,
    };
  },
  methods: {
    changeSelect(val) {
      this.value = val;
      if (val == 3) {
        this.inputVisible = false;
      }
    },
    showInput() {
      this.inputVisible = false;
      this.$nextTick((_) => {
        this.$refs.inputRefs.focus();
      });
    },
  },
};
</script>
<style scoped>
.my-components {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}
</style>
